<template>
  <div class="area_map">
    <div id="contentMap" v-loading="loading" element-loading-text="拼命加载中"  element-loading-background="rgba(8,18,79,1)"></div>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  let echarts = require('echarts/lib/echarts')
  var ecConfig = echarts.config
  // let ecConfig = require('echarts/config')
  import china from 'echarts/map/js/china.js'
  import hebei from 'echarts/map/js/province/hebei.js'
  import shijiazhuang from 'echarts/map/js/hebei_city/shijiazhuang.js'
  export default {
    name: 'contentMiddle',
    props: ['map'],
    data() {
      return {
        totalNum: [],
        totalPark: [],
        useNum: [],
        mapName: '石家庄',
        mapData:[],
        loading: true
      }
    },
    mounted() {
      // this.getParkNum();
      // if(this.map != '') {
      //   this.mapName = this.map;
      // }
      this.getParkInfo();
      // this.drawMap();
      // this.getParkNum1();//临时模拟假数据
    },
    methods: {
      getParkInfo() {
        this.$axios({
          method: 'get',
          url: '/park/park-info/idc-park-position',
          params: {parkAddress: '河北省石家庄市'}
        }).then((res) => {
          if(res.code == 200) {
            this.mapData = res.data;
            this.$nextTick(() => {
              this.drawMap();
            })
          }
        })
      },

      toPage() {
        // this.$emit('toPage')
      },

      // getParkNum () {
      //   axios({
      //     method: 'post',
      //     url: '/api/bParkManage/getParkDataInfo',
      //     data: qs.stringify({type: 1})
      //   }).then((res) => {
      //     this.totalNum = res.data.data.total.toString().replace(/(.)(?=[^$])/g, "$1,").split(",");
      //     this.useNum = res.data.data.used.toString().replace(/(.)(?=[^$])/g, "$1,").split(",");
      //     this.totalPark = res.data.data.totalPark.toString().replace(/(.)(?=[^$])/g, "$1,").split(",");
      //   })
      // },

      drawMap() {
        let _this = this;
        var myChartsMap = echarts.init(document.getElementById('contentMap'));
        myChartsMap.setOption({
           geo: {
            type: 'map',
            roam: false,
            map: _this.mapName, //地图类型。
            label: {
              normal: {
                show: false,
                color:'#fff'
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#0394d9',
                areaColor: '#09155D',
              },
              emphasis: {
                areaColor: '#09155D',
                // areaColor: '#08124f',
                // areaColor: 'none',
                borderWidth: 0
              },
            },
            zoom:1.27,//放大比例
            roam: true,
          },
          tooltip:{
            show:true, //鼠标移入是否触发数据
            trigger: 'item', //出发方式
            backgroundColor: null,
            formatter(params){
              let parkName = params.value[4];
              const content = '<span style="display:inline-block;padding:8px; border-radius: 6px;box-shadow: rgb(32,195,248) 0px 0px 12px 2px inset;">' + parkName +'</span>'
              return content
            }
          },
          series: [{
            //根据经纬度在地图上描点
            type: 'scatter',
            coordinateSystem: 'geo',
            // animation: true,
            // rippleEffect: {
            //   brushType: 'stroke'
            // },
            // symbolSize: function (val,params) {
            //   return 30;
            // },



            data: _this.mapData.map(function (itemOpt) {
              return {
                // name: itemOpt.name,
                value: [
                  itemOpt.longitude,
                  itemOpt.latitude,
                  itemOpt.id,
                  itemOpt.saturation,
                  itemOpt.parkName
                ],
                label: {
                  emphasis: {
                    position: 'right',
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color:'#f40'
                  // color: itemOpt.color //色值
                    // color: 'green'
                  }
                }
              };
            }),
            showAllSymbol: false,
            symbolSize: function (params) {
              // if (params[2] > 800) {
              //   return [16,16];
              // }
              return [10,10];//描点的大小
            },
            symbol: function (params) {
              if(params[3] > 800) {
                return 'image://https://file.zmzncs.com/file/lmtc//image/2021-07-23/green.png'
              } else if(params[3] > 100) {
                return 'image://https://file.zmzncs.com/file/lmtc//image/2021-07-23/red.png'
              } else {
                return 'image://https://file.zmzncs.com/file/lmtc//image/2021-07-23/yellow.png'
              }
            }
          }]
        })
        myChartsMap.on('click', goInfo);
        function goInfo(params) {
          if(params.value) {
            _this.$emit('toPage',params.value[2]);
          }
        }
      },


    }
  }
</script>
<style scoped>
  .area_map {
    height: 100%;
    width: 100%;
  }

   #contentMap {
     display: inline-block;
     height: 100%;
     width: 100%;
   }

</style>
